
<template>
  <!-- 词云图 -->
  <div id="bubbleImg" ref="bubbleImg" class="chart" :style="{'height': type=='patent'? '8rem': '8rem'}"></div>
</template>
<script>
import * as echarts from "echarts";
const imgInfo = {
  bubble0: require("@/assets/bubble1.png"),
  bubble1: require("@/assets/bubble2.png"),
  bubble2: require("@/assets/bubble3.png"),
  bubble3: require("@/assets/bubble4.png"),
};
export default {
  props: {
    chartId: {
      type: String,
    },
    chartData: {
      type: Array,
    },
  },
  data() {
    return {
      type: "",
      showNodes: [],
      showEdges: [],
      curShowNodes: [],
      curShowEdges: [],
      nodes: [],
      edges: [],
      nodeMap: new Map(),
      edgesMap: new Map(),
      curShowNodesMap: new Map(),
      highlighting: false,
      currentFocus: null,
      LIMIT_OVERFLOW_WIDTH: null,
      LIMIT_OVERFLOW_HEIGHT: null,
      width: 0,
      height: 0,
      graph: null,
      gColors: [],
      mchartData: {
        nodes: [],
      },
    };
  },
  watch: {
    chartData(val) {
      this.mchartData = val;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let obj = {}
      this.type = this.$route.query && this.$route.query.type
      const data = obj;
      const result = [];
      let index = 0;
      let sizeList = []
      if (this.type === "patent") { // 专利 词云分析'
        if (this.chartData) {
          this.chartData.map(item => {
            if (item.key) {
              obj[item.key] = item.doc_count 
            }
          })
        }
        for (let key in data) {
          if (key && result.length < 50 && key != "其他") {
            result.push({
              label: key,
              amount: obj[key],
            });
            index++;
          }
        }
      } else { // 论文 词云分析
        if (this.chartData) {
          this.chartData.map(item => {
            if (item.key) {
              obj[item.key] = item.doc_count
            }
          })
        }
        // console.log(123, data)
        for (let key in data) {
          if (key && result.length < 50 && key != "其他") {
            result.push({
              label: key,
              amount: 60 ,
            });
            index++;
          }
        }
      }
      this.bubbleData(result, ["label", "amount"], "bubbleImg");
    },
    bubbleData(data, format, dom) {
      let [maxValue, temp] = [0, []];
      data.forEach((item) => {
        temp.push(item[format[1]]);
      });
      maxValue = Math.max.apply(null, temp);

      // 气泡颜色数组
      let color = ["#fff"];

      const pointList = [
        { x: 173, y: 150 },
        // { x: 130, y: 150 },
        { x: 213, y: 150 },
        { x: 173, y: 190 },
        { x: 173, y: 110 },
        { x: 87, y: 217 },
        { x: 256, y: 217 },
        { x: 291, y: 150 },
        { x: 256, y: 83 },
        { x: 87, y: 83 },
        { x: 54, y: 150 },
      ];
      // 气泡颜色备份
      let bakeColor = [...color];
      // 气泡数据
      let bubbleData = [];
      // 气泡基础大小
      // let basicSize = 70;
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = [120, 120];
      // 填充气泡数据数组bubbleData
      let idx = 0;
      for (let item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeColor.length) bakeColor = [...color];
        let colorSet = new Set(bakeColor);
        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
        let curColor = bakeColor[curIndex];
        colorSet.delete(curColor);
        bakeColor = [...colorSet];
        // 气泡大小设置
        let size = item[format[1]];
        let d = {
          name: item[format[0]],
          value: item[format[1]],
          symbolSize: size,
          draggable: false,
          itemStyle: {
            color: curColor,
          },
          // x: pointList[idx].x,
          // y: pointList[idx].y,
          label: {
            show: true,
            color: "#000",
            fontWeight: "",
            fontSize: 6 + Math.floor(size / 10),
            width: size,
            height: size,
            align: "center",
            verticalAlign: "middle",
            backgroundColor: {
              // image: imgInfo["bubble" + (idx % 3)],
              image: imgInfo["bubble3"],
            },
            formatter(param) {
              let nameList = param.name.split("");
              let str = "";
              nameList.forEach((list, index) => {
                if ((index + 1) % 6 == 0 && index + 1 != nameList.length) {
                  str += list + "\n";
                } else {
                  str += list;
                }
              });
              return str;
              // return param.name + "\n";
            },
          },
        };
        if (idx == 0) {
          d["x"] = 130;
          d["y"] = 150;
        }
        bubbleData.push(d);
        idx++;
      }

      let bubbleId = document.getElementById(dom);
      let bubbleChart = echarts.init(bubbleId);

      let bubbleOptions = {
        // backgroundColor: "#fff",
        animationEasingUpdate: "bounceIn",
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: repulsion,
              edgeLength: 10,
            },
            left: 1,
            top: 1,
            right: 1,
            bottom: 1,
            // 是否开启鼠标缩放和平移漫游
            roam: true,
            data: bubbleData,
          },
        ],
      };
      bubbleChart.setOption(bubbleOptions, true);
    },
  },

  destroyed() {},
};
</script>

<style lang="scss" scoped>
.currentHot {
  border-radius: 0.1rem;
  :deep {
    .t-title {
      color: #fff;
    }
    .tit .t-bg {
      background-image: linear-gradient(to right, #3C97F1, #426095);
    }
  }
}
#bubbleImg {
  margin-top: -0.1rem;
  width: 100%;
  height: 6rem;
  :deep {
    canvas {
      border-radius: 0.1rem;
    }
  }
}
</style>



